<template>
    <div @click="$router.push('./postdetail/' + postData.id)">
        <div
            class="singlePost"
            v-if="
                postData.type == 1 &&
                postData.cover.length > 0 &&
                postData.cover.length < 3
            "
        >
            <div class="left">
                <div class="title">{{ postData.title }}</div>
                <div class="info">
                    {{ postData.user.nickname }}
                    {{ postData.comment_length }}跟帖
                </div>
            </div>
            <img
                :src="postData.cover[0].url | fixImgUrl"
                alt=""
                class="right"
            />
        </div>

        <div
            class="multiPost"
            v-if="postData.type == 1 && postData.cover.length >= 3"
        >
            <div class="title">
                {{ postData.title }}
            </div>
            <div class="coverWrapper">
                <img
                    :src="postData.cover[0].url | fixImgUrl"
                    alt=""
                    class="cover"
                />
                <img
                    :src="postData.cover[1].url | fixImgUrl"
                    alt=""
                    class="cover"
                />
                <img
                    :src="postData.cover[2].url | fixImgUrl"
                    alt=""
                    class="cover"
                />
            </div>
            <div class="info">
                {{ postData.user.nickname }} {{ postData.comment_length }} 跟帖
            </div>
        </div>

        <div
            class="videoPost"
            v-if="postData.type == 2 && postData.cover.length > 0"
        >
            <div class="title">{{ postData.title }}</div>
            <div class="coverWrapper">
                <img
                    :src="postData.cover[0].url | fixImgUrl"
                    alt=""
                    class="cover"
                />
                <span class="iconfont iconshipin"></span>
            </div>
            <div class="info">
                {{ postData.user.nickname }} {{ postData.comment_length }} 跟帖
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ["postData"],
    };
</script>

<style lang="less" scoped>
    .singlePost {
        display: flex;
        padding: 16 /360 * 100vw;
        border-bottom: 1px solid #e4e4e4;
        .left {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            justify-content: space-between;
            .title {
                font-size: 16 /360 * 100vw;
                color: #333;
            }
            .info {
                font-size: 14 /360 * 100vw;
                color: #888;
            }
        }
        .right {
            width: 121 /360 * 100vw;
            height: 75 /360 * 100vw;
            object-fit: cover;
        }
    }
    .multiPost {
        padding: 16 /360 * 100vw;
        border-bottom: 1px solid #e4e4e4;
        .title {
            font-size: 16 /360 * 100vw;
            color: #333;
        }
        .info {
            font-size: 14 /360 * 100vw;
            color: #888;
        }
        .coverWrapper {
            display: flex;
            justify-content: space-between;
            margin: 10 /360 * 100vw 0;
            .cover {
                width: 33%;
                height: 74 /360 * 100vw;
                object-fit: cover;
            }
        }
    }
    .videoPost {
        padding: 16 /360 * 100vw;
        border-bottom: 1px solid #e4e4e4;
        .title {
            font-size: 16 /360 * 100vw;
            color: #333;
        }
        .info {
            font-size: 14 /360 * 100vw;
            color: #888;
        }
        .coverWrapper {
            margin: 10 /360 * 100vw 0;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            .cover {
                width: 100%;
                height: 170 /360 * 100vw;
                object-fit: cover;
            }
            .iconshipin {
                position: absolute;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.3);
                font-size: 46 /360 * 100vw;
                border-radius: 50%;
            }
        }
    }
</style>